<!-- 优惠券中心  -->
<template>
	<s-layout title="我的券包" :bgStyle="{ color: '#f2f2f2' }">
		<su-sticky bgColor="#fff">
			<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
		</su-sticky>
		<s-empty v-if="state.pagination.total === 0" icon="/static/coupon-empty.png" text="暂无优惠券"></s-empty>
		<template>
			<view v-for="item in state.pagination.data" :key="item.id">
				<s-coupon-list :data="item" type="user" @tap="
					sheep.$router.go('/pages/coupon/detail', {
						id: item.coupon_id,
						user_coupon_id: item.id,
					})
					">
					<template  v-slot:reason>
						<view class="btn-zhuti-box">
							<button v-if="item.status == 'expired'"
								class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" type="button"
								@click.stop="upgrades(item.id)">升级</button>
							<button v-if="item.status == 'can_use'"
								class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" type="button"
								@click.stop="donation(item.id)">赠送</button>
						</view>

					</template>
				</s-coupon-list>

			</view>
		</template>
		<su-popup :show="state.show" type="bottom" round="20" @close="state.show = false" showClose
			backgroundColor="#f2f2f2">
			<view class="model-box">
				<view class="title ss-m-t-16 ss-m-l-20 ss-flex"></view>
				<view class="uni-form-item uni-column content-box">
					<view class="title">手机号码：</view>
					<input class="uni-input phone-input" type="number" v-model="state.phone_input"
						placeholder="请输入已绑定用户账号的手机号码" />
				</view>
				<view class="uni-form-item uni-column content-box">
					<view class="title">手机号码：</view>
					<input class="uni-input phone-input" type="number" v-model="state.phone_input_two"
						placeholder="请输入相同的手机号码" />
				</view>
				<view class="btn-box">
					<button type="default" @click="state.show = false">取消</button>
					<button type="primary" @click="tijiao">确认</button>
				</view>
			</view>
		</su-popup>
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
			contentdown: '上拉加载更多',
		}" @tap="loadmore" />
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import _ from 'lodash';

// 数据
const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1,
};

const state = reactive({
	currentTab: 0,
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',
	type: '',
	phone_input: '',
	phone_input_two:'',
	conpun_id: '',
	show: false
});

const tabMaps = [
	// {
	// 	name: '领券中心',
	// 	value: 'all',
	// },
	{
		name: '已领取',
		value: 'geted',
	},
	{
		name: '已使用',
		value: 'used',
	},
	{
		name: '已过期',
		value: 'expired',
	},
];

function donation(e) {
	state.show = true;
	state.conpun_id = e;
	state.phone_input = "";
}

// 赠送优惠券
async function tijiao() {
	if (!state.phone_input) {
		return uni.showToast({
			title: '请输入已绑定用户账号的手机号码',
			icon: 'none',
			duration: 2000
		})
	}
	if (!state.phone_input_two) {
		return uni.showToast({
			title: '请输入相同的手机号码',
			icon: 'none',
			duration: 2000
		})
	}

	if (state.phone_input !== state.phone_input_two) {
		return uni.showToast({
			title: '两次输入电话不同请重新输入',
			icon: 'none',
			duration: 2000
		})
	}
	uni.showModal({
	    title: '提示',
	    content: '您确认要转让给'+state.phone_input+'吗？',
	    success: function (res) {
	        if (res.confirm) {
			   if (isValidPhoneNumber(state.phone_input)) {
					sheep.$api.coupon.couponZengsong({
						user_coupon_id: state.conpun_id,
						mobile: state.phone_input
					}).then((res1) => {
						console.log(res1);
						if (res1.code == 1) {
							uni.showToast({
								title: '赠送成功',
								icon: 'success',
								duration: 2000,
								success: ()=>{
								
								}
							})
							state.show = false;
							state.pagination.data=[];
							setTimeout(function(){
								getCoupon();
							}, 1500)
						} else {
							uni.showToast({
								title: res1.msg,
								icon: 'error',
								duration: 2000
							})
							state.show = false;
						}
					}) ;
				
			   
			   } else {
			   	return uni.showToast({
			   		title: '请输入有效手机号',
			   		icon: 'error',
			   		duration: 2000
			   	})
			   }
			   
			   
	        } else if (res.cancel) {
	            console.log('用户点击取消');
	        }
	    }
	});
	
	

}

function isValidPhoneNumber(phoneNumber) {
	const regex = /^1[3-9]\d{9}$/;
	return regex.test(phoneNumber);
}

// 优惠券升级
async function upgrades(e) {
	let res = await sheep.$api.coupon.upgrade(e)
	if (res.code) {
		uni.showToast({
			title: '升级成功',
			icon: 'success',
			duration: 2000
		})
		setTimeout(function(){
			getCoupon();
		}, 1500)
	} else {
		uni.showToast({
			title: res.msg,
			icon: 'error',
			duration: 2000
		})
	}
}

function onTabsChange(e) {
	state.pagination = pagination;
	state.currentTab = e.index;
	state.type = e.value;
	if (state.currentTab == 0) {
		// getData();
		getCoupon();
	} else {
		getCoupon();
	}
}
async function getData(page = 1, list_rows = 5) {
	state.loadStatus = 'loading';
	const res = await sheep.$api.coupon.list({
		list_rows,
		page
	});
	if (res.code === 1) {
		let couponlist = _.concat(state.pagination.data, res.data.data);
		state.pagination = {
			...res.data,
			data: couponlist,
		};
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}
}

async function getCoupon(page = 1, list_rows = 5) {
	// state.loadStatus = 'loading';
	let res = await sheep.$api.coupon.userCoupon({
		type: state.type,
		list_rows,
		page,
	});
	if (res.code === 1) {
		let couponlist = _.concat(state.pagination.data, res.data.data);
		state.pagination = {
			...res.data,
			data: couponlist,
		};
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}
}
async function getBuy(id) {
	const {
		code,
		msg
	} = await sheep.$api.coupon.get(id);
	if (code === 1) {
		uni.showToast({
			title: msg,
		});
		setTimeout(() => {
			state.pagination = pagination;
			getData();
		}, 1000);
	}
}

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		if (state.currentTab == 0) {
			// getData(state.pagination.current_page + 1);
			getCoupon(state.pagination.current_page + 1);
		} else {
			getCoupon(state.pagination.current_page + 1);
		}
	}
}

onLoad((Option) => {
	if (Option.type === 'all' || !Option.type) {
		getData();
	} else {
		state.type = Option.type;
		Option.type === 'geted' ?
			(state.currentTab = 0) :
			Option.type === 'used' ?
				(state.currentTab = 1) :
				(state.currentTab = 2);
		getCoupon();
	}
});
onReachBottom(() => {
	loadmore();
});
</script>
<style lang="scss" scoped>
.btn-zhuti-box {
	display: flex;
}

.btn-zhuti-box>button {
	margin-right: 10rpx;
}

.btn-zhuti-box>button:last-child {
	margin-right: 0;
}

.card-btn {
	// width: 144rpx;
	padding: 0 16rpx;
	height: 50rpx;
	border-radius: 40rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 400;
}

.border-btn {
	background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
	color: #fff !important;
}

.disabled-btn {
	background: #cccccc;
	background-color: #cccccc !important;
	color: #fff !important;
}

.model-box {
	height: 60vh;
	position: relative;
	padding: 15rpx 15rpx 0 15rpx;
}

.content-box {
	padding: 15rpx;
	font-size: 16px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

// .content-box:(.phone-input:focus)

.btn-box {
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: calc(50% + 68px);
	left: 50%;
	transform: translate(-50%,-50%);
}

.btn-box>button {
	width: 30%;
	margin: 0 20rpx 0 0;
}

.btn-box>button:last-child {
	margin: 0;
}

.phone-input {
	flex-grow: 1;
}
</style>